<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText" @tap="back()">返回</block>
			<block slot="content">我的下载</block>
		</cu-custom>
		<view class="music-list">
			<view v-for="f in fileList" class="music-item">
				<view class="music-icon"></view>
				<text>
					{{ f.info.name }} - {{ f.info.singer }}
				</text>
			</view>
		</view>
		<view class="no-info"> - - - - - - - - 没有更多啦!!! - - - - - - - - </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
			}
		},
		onShow() {
			this.getSaveFile()
		},
		methods: {
			getSaveFile() {
				let self = this
				let fs = uni.getStorageSync('saveList') || []
				if (fs.length==0) return;
				uni.getSavedFileList({
				  success:(res) => {
						self.fileList = []
						let fl = res.fileList
						fl.forEach(f => {
							let fo = {}
							fs.forEach(s => {
								if (f.filePath == s.path) {
									fo = {
										path: f.filePath,
										time: f.createTime,
										size: f.size,
										info: s.info
									}
								} else {
									fo = {
										path: f.filePath,
										time: f.createTime,
										size: f.size
									}
								}
							})
							self.fileList.push(fo)
						})
				  }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.music-list {
		position: relative;
		.music-item {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
			margin-left: 60rpx;
			margin-top: 50rpx;
			.music-icon {
				width: 160rpx;
				height: 140rpx;
				background-image: url(../../static/imgs/icons/f-mp3.png);
				background-size: 100% 100%;
			}
			text {
				display:block;
				padding-left: 20rpx;
				height: 20rpx;
				width: 160rpx;
				font-size: 16rpx;
				color: gray;
				overflow: hidden; 
				text-overflow: ellipsis; 
				-o-text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	.no-info {
		padding: 50rpx;
		text-align: center;
		font-weight: bold;
		color: gray;
	}
</style>
